<template>
  <a-drawer
    :title="title"
    placement="right"
    :closable="true"
    :width="width"
    :visible="visible"
    @close="handleCancel"
    destroyOnClose
  >
    <a-spin :spinning="confirmLoading">
      <j-form-container >
        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="收款方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="payType">
                <a-radio-group v-model="model.payType">
                  <a-radio :value="1">
                    线上收款
                  </a-radio>
                  <a-radio :value="2">
                    线下收款
                  </a-radio>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="收款凭证" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="collectImg">
                <j-image-upload v-model="model.collectImg"></j-image-upload>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container>
    </a-spin>
    <a-button type="primary" @click="handleOk" style="width: 100%;">保存</a-button>
  </a-drawer>

  <!--<j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">
    &lt;!&ndash;<contract-audit-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></contract-audit-form>&ndash;&gt;

  </j-modal>-->
</template>

<script>

  import Vue from "vue";
  import {putAction} from "../../../../../api/manage";
  import { ACCESS_TOKEN } from "@/store/mutation-types"

  export default {
    name: 'contractAuditModal',
    data () {
      return {
        title:'',
        width:'100%',
        visible: false,
        disableSubmit: false,
        uploadAction: window._CONFIG['domianURL'] + "/sys/oss/file/upload",
        fileList: [],
        newFileList: [],
        headers: {},
        previewVisible: false,
        previewImage: '',
        returnUrl: {
          type: Boolean,
          required: false,
          default: true
        },
        model:{},
        uploadGoOn:true,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          payType: [{ required: true, message: '请选择收款方式' }],
          collectImg: [{ required: true, message: '请上传收款凭证' }],
        },
        url: {
          add: "/ghFinanceContractAudit/add",
          edit: "/ghFinanceContractAudit/edit",
          queryById: "/ghFinanceContractAudit/queryById"
        }
      }
    },
    created () {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"X-Access-Token": token}
    },
    methods: {
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            this.model.payStatus = 1
            that.confirmLoading = true;
            putAction(this.url.edit,this.model).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close()
            })
          }

        })
      },
      submitCallback(){
        this.$emit('ok');
        this.visible = false;
      },
      handleCancel () {
        this.close()
      },
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.title = "合同收款"
        this.visible = true;
      },
      //关闭预览照片
      handleClose() {
        this.previewVisible = false;
      },
      async handlePreview(file) {
        if (!file.response.result && !file.preview) {
          file.preview = await getBase64(file.originFileObj);
        }
        this.previewImage = file.response.result || file.preview;
        this.previewVisible = true;
      },
      doBeforeUpload(file){
        this.fileList = [];
        this.uploadGoOn=true
        const isLt10M = file.size / 1024 / 1024 < 10
        if (!isLt10M) {
          this.$message.error('上传文件大小不能超过 10MB!')
          this.uploadGoOn=false
          return false;
        }
        return true
      },
      handleChange(info) {
        if(!info.file.status && this.uploadGoOn === false){
          info.fileList.pop();
        }
        let fileList = info.fileList
        if(info.file.status==='done'){
          if(this.number>0){
            fileList = fileList.slice(-this.number);
          }
          if(info.file.response.success){
            fileList = fileList.map((file) => {
              if (file.response) {
                /*let reUrl = file.response.message;
                file.url = getFileAccessHttpUrl(reUrl);*/
                file.url = file.response.result;
              }
              return file;
            });
          }
          //this.$message.success(`${info.file.name} 上传成功!`);
        }else if (info.file.status === 'error') {
          this.$message.error(`${info.file.name} 上传失败.`);
        }else if(info.file.status === 'removed'){
          this.handleDelete(info.file)
        }
        this.fileList = fileList
        if(info.file.status==='done' || info.file.status === 'removed'){
          //returnUrl为true时仅返回文件路径
          if(this.returnUrl){
            this.handlePathChange()
          }else{
            //returnUrl为false时返回文件名称、文件路径及文件大小
            this.newFileList = [];
            for(var a=0;a<fileList.length;a++){
              // update-begin-author:lvdandan date:20200603 for:【TESTA-514】【开源issue】多个文件同时上传时，控制台报错
              if(fileList[a].status === 'done' ) {
                var fileJson = {
                  fileName:fileList[a].name,
                  filePath:fileList[a].response.message,
                  fileSize:fileList[a].size
                };
                this.newFileList.push(fileJson);
              }else{
                return;
              }
              // update-end-author:lvdandan date:20200603 for:【TESTA-514】【开源issue】多个文件同时上传时，控制台报错
            }
            this.$emit('change', this.newFileList);
          }
        }
      },
      handleDelete(file){

      },
      handlePathChange() {
        let uploadFiles = this.fileList
        let path = ''
        if (!uploadFiles || uploadFiles.length === 0) {
          path = ''
        }
        let arr = [];
        if (!this.isMultiple && uploadFiles.length > 0) {
          arr.push(uploadFiles[uploadFiles.length - 1].response.message)
        } else {
          for (let a = 0; a < uploadFiles.length; a++) {
            // update-begin-author:taoyan date:20200819 for:【开源问题z】上传图片组件 LOWCOD-783
            if (uploadFiles[a].status === 'done') {
              arr.push(uploadFiles[a].response.message)
            } else {
              return;
            }
            // update-end-author:taoyan date:20200819 for:【开源问题z】上传图片组件 LOWCOD-783
          }
        }
        if (arr.length > 0) {
          path = arr.join(",")
        }
        this.$emit('change', path);
      },
    }
  }
</script>